<template>
	<view class="detail-page">
		<view class="header">
			<view class="tabs">
				<view v-for="(category, index) in uniqueCategories" :key="index" class="tab-item"
					:class="{ active: selectedType === category.type }" @click="showContentByType(category.type)">
					{{ category.name }}
				</view>
			</view>
		</view>
		<view class="play-items" v-if="selectedType !== null && selectedTypeContent.length > 0">
			<view class="play-card" v-for="(content, contentIndex) in selectedTypeContent"
				:key="content.objectId||contentIndex" @tap="toDetails(content.name)">
				<view class="pic">
					<image class="item-image" mode="aspectFill" :src="content.img" />
				</view>
				<view class="msg">
					<view class="name">{{ content.name }}</view>

					<view class="intro">{{ content.intro }}</view>

				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		CONFIG
	} from '../../utils/config';
	import {
		userStore
	} from '../../store/userStrore'
	import {
		getMapDistance
	} from "@/utils/tools.js"

	let selectedType = ref(null); // 选中的分类ID
	let CateList = ref([]);
	let selectedTypeContent = computed(() => {
		return CateList.value.filter(item => item.type === selectedType.value);
	});

	onLoad(() => {
		getCates();
	});

	let typeMap = {
		1: '历史',
		2: '美食',
		3: '景点',
		4: '名人',
	};

	let store = userStore();
	let currentPos = store.currentPos;


	function getTypeName(type) {
		return typeMap[type];
	}

	let uniqueCategories = computed(() => {
		let map = new Map();
		CateList.value.forEach(item => {
			if (!map.has(item.type)) {
				map.set(item.type, {
					type: item.type,
					name: getTypeName(item.type)
				});
			}
		});
		return [...map.values()];
	});

	/* async function getCates() {
	  try {
	    let res = await uni.$request({
	      url: CONFIG.leandcloud_url+"/1.1/classes/xianplayitem", // 使用模板字符串
	      method: "GET"
	    });
	    if (res.statusCode === 200) {
	      CateList.value = res.data.results;
	    } else {
	      console.log("网络请求错误", res);
	    }
	  } catch (error) {
	    console.log("请求错误", error);
	  }
	} */
	async function getCates() {
		let res = await uni.$get(CONFIG.leandcloud_url + "/1.1/classes/xianplayitem")
		console.log(res)

		CateList.value = res.results
	}

	function showContentByType(type) {
		selectedType.value = type;
	}

	function toDetails(name) {
		// 实现跳转到详情页的逻辑
		console.log(`跳转到详情页：${name}`);
		uni.navigateTo({
			url: `/pages/xianItemDetails/xianItemDetails?name=${name}`
		})
	}
</script>

<style scoped>
	body {
		background-image: url('/static/images/1.png');
		background-size: cover;
		background-position: center;
	}

	.header {
		display: flex;
		position: fixed;
		top: 44px;
		width: 750rpx;
		height: 40px;
		background: url('/static/images/1.png');
		padding: 10px 0;
		z-index: 99;
	}

	.tabs {
		display: flex;
		justify-content: space-between;
		/* 确保标签等间距 */
		width: 100%;
	}

	.tab-item {
		padding: 10px 20px;
		cursor: pointer;
		transition: color 0.3s ease, border-bottom 0.3s ease;
		/* 添加了border-bottom的过渡效果 */
	}

	.tab-item:hover {
		color: #0056b3;
	}

	.tab-item.active {
		color: #0056b3;
		border-bottom: 2px solid #0056b3;
		/* 激活状态的标签底部边框 */
	}

	/* 可以添加一些响应式设计 */
	@media (max-width: 768px) {
		.tab-item {
			padding: 8px 15px;
		}
	}

	.play-items {
		position: relative;
		top:40px;
		margin-top: 10px;
		z-index: 1;
		padding: 10px;
		background: url('/static/images/1.png');
	}

	.play-card {
		display: flex;
		
		flex-direction: column;
		margin-bottom: 20px;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	.pic {
		width: 100%;
		height: 200px;
		object-fit: cover;
	}

	.item-image {
		width: 100%;
		height: 100%;
	}

	.msg {
		padding: 15px;
		background-color: #fff;
	}

	.name {
		font-size: 18px;
		color: #333;
		margin-bottom: 5px;
	}

	.intro {
		font-size: 14px;
		color: #666;
	}
</style>